/* 人员选择 */
<template>
  <div class="personselect-config">
    <je-form-item label="展示方式" name="inputType">
      <je-select
        v-model:value.trim="formState.inputType"
        :options="[
          { value: 'input', label: '文本框' },
          { value: 'textarea', label: '文本域' },
        ]"
      >
      </je-select>
    </je-form-item>

    <je-form-item label="禁用过滤方式" name="queryType">
      <je-checkbox-group
        v-model:value="formState.queryType"
        :options="
          [
            { key: 'common', title: '常用' },
            { key: 'dept', title: '部门' },
            { key: 'role', title: '角色' },
            { key: 'organ', title: '机构' },
          ].map((item) => ({ label: item.title, value: item.key }))
        "
      />
    </je-form-item>
    <je-form-item name="deptQuery" label="部门过滤条件">
      <je-textarea v-model:value="formState.deptQuery" :rows="4" />
    </je-form-item>
    <je-form-item name="roleQuery" label="角色过滤条件">
      <je-textarea v-model:value="formState.roleQuery" :rows="4" />
    </je-form-item>
    <je-form-item name="organQuery" label="机构过滤条件">
      <je-textarea v-model:value="formState.organQuery" :rows="4" />
    </je-form-item>
    <je-form-item label="条件说明" name="querySqlDesc">
      <je-textarea v-model:value="formState.querySqlDesc" :rows="4" />
    </je-form-item>
    <!-- <je-form-item label="可选可输入" name="optionalAndInput">
      <je-switch v-model:value="formState.optionalAndInput" mode="checkbox" />
      <span class="prompt">启动后可以通过选择写入也可以直接写入。</span>
    </je-form-item>

    <je-form-item label="可选可过滤" name="optionalAndQuery">
      <je-switch v-model:value="formState.optionalAndQuery" mode="checkbox" />
      <span class="prompt">启动后可以通过选择写入也可以搜索过滤数据。</span>
    </je-form-item>

   

    <je-form-item label="回显过滤字段" name="pkName">
      <je-select v-model:value="formState.pkName" :options="options.nodeField"></je-select>
    </je-form-item> -->

    <!-- <je-form-item label="快查字段" name="queryField">
      <je-select v-model:value="formState.queryField" :options="options.queryField"></je-select>
    </je-form-item>

    <je-form-item label="快查取值字段" name="nodeField">
      <je-select v-model:value="formState.nodeField" :options="options.nodeField"></je-select>
    </je-form-item> -->
  </div>
</template>
<script>
  import { defineComponent, nextTick, reactive, watch } from 'vue';
  import { Select, Checkbox, Input, Modal } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';
  import { FORM_FILTER_UNITPLE } from '@/helper/tip-constant';

  export default defineComponent({
    name: 'PersonselectConfig',
    components: {
      // JeFormItem: Form.Item,
      // JeSwitch: Switch,
      JeSelect: Select,
      JeCheckboxGroup: Checkbox.Group,
      JeTextarea: Input.TextArea,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
      configInfo: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        inputType: config.inputType || 'input', //展示方式
        queryType: config.queryType || '', // 过滤条件
        deptQuery: config.deptQuery || '', //部门过滤条件
        roleQuery: config.roleQuery || '', //角色过滤条件
        organQuery: config.organQuery || '', // 机构过滤条件
        querySqlDesc: config.querySqlDesc || '', //过滤说明
        /* optionalAndInput: config.optionalAndInput, //可选可输入
        optionalAndQuery: config.optionalAndQuery, //可选可过滤
        pkName: config.pkName || '', //回显过滤字段
        queryField: config.queryField || '', //快查字段
        nodeField: config.nodeField || '', //快查取值字段 */
      });

      //下拉框的数据
      /* const options = reactive({
        queryField: [],
        nodeField: [],
      });
      //根据configInfo的数据更新下拉框的数据
      const setOtherConfig = (configInfo) => {
        if (isNotEmpty(configInfo)) {
          const configData = configInfo.split(',');
          //快查字段下拉框数据封装
          if (isNotEmpty(configData[1])) {
            const fieldCodes = configData[1].split('~');
            if (fieldCodes.length > 0) {
              const queryFieldArray = [];
              //数据去重
              const newCodes = [...new Set(fieldCodes)];
              newCodes.forEach((code) => {
                queryFieldArray.push({ value: code, label: code });
              });
              if (queryFieldArray.length > 0) {
                options.queryField = queryFieldArray;
              }
            }
          }

          //快查取值字段
          if (isNotEmpty(configData[2])) {
            const nodeCodes = configData[2].split('~');
            if (nodeCodes.length > 0) {
              const nodeFieldArray = [];
              //数据去重
              const newCodes = [...new Set(nodeCodes)];
              newCodes.forEach((code) => {
                nodeFieldArray.push({ value: code, label: code });
              });
              if (nodeFieldArray.length > 0) {
                options.nodeField = nodeFieldArray;
              }
            }
          }
        }
      };
      watch(
        () => props.configInfo,
        () => {
          setOtherConfig(props.configInfo);
        },
        { deep: true.valueOf, immediate: true },
      ); */
      watch(
        () => formState,
        () => {
          if (formState.queryType && formState.queryType.split(',').length == 4) {
            const newQueryType = formState.queryType.split(',').splice(0, 3);
            nextTick(() => {
              formState.queryType = newQueryType.join(',');
            });
            Modal.alert('禁用过滤方式不允许全部禁用！', 'info');
          }
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
        //setOtherConfig,
      });

      return { formState };
    },
  });
</script>
<style lang="less" scoped></style>
